<template>
  <el-container class="center-wrapper">
    <el-header class="d-flex space-between">
      <div class="logo d-center">
        <i class="el-icon-menu" @click="toggle"></i>
        <router-link to="/" style="display: block;"><h1 class="ml-3">博览社区</h1></router-link>
      </div>
      <div class="d-flex flex-center" style="width: 200px">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ this.$store.state.username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="$router.push('/center/profile')">个人中心</el-dropdown-item>
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container :class="showSidebar ? 'showSidebar' : ''" style="margin-top: 60px; background-color: #fff;">
      <el-aside width="200px">
        <el-menu router class="el-menu-vertical-demo" :default-active="$route.path" @select="sideSelect">
          <el-menu-item index="/">
            <i class="el-icon-s-home"></i>
            <span slot="title">网站首页</span>
          </el-menu-item>
          <!-- :route="{path: `/center/order${id}`}" -->
          <el-menu-item :index="'/center/order/' + id" @click="goPay">
            <i class="el-icon-s-goods"></i>
            <span slot="title">在线下单</span>
          </el-menu-item>
          <el-menu-item index="/center/pay">
            <i class="el-icon-circle-plus"></i>
            <span slot="title">余额充值</span>
          </el-menu-item>
          <el-menu-item index="/center/record">
            <i class="el-icon-s-claim"></i>
            <span slot="title">余额明细</span>
          </el-menu-item>
          <el-menu-item index="/center/myOrder">
            <i class="el-icon-s-order"></i>
            <span slot="title">我的订单</span>
          </el-menu-item>
          <el-menu-item index="/center/profile">
            <i class="el-icon-user-solid"></i>
            <span slot="title">账号信息</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <div class="mask" v-show="showMask" @click="closeSidebar"></div>

      <el-main>
        <router-view :key="$route.path"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import lf from "localforage";
export default {
  data() {
    return {
      showSidebar: false,
      showMask: false,
      id: "",
      firstGoods: {},
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.firstGoods = (await lf.getItem("goods"))[0];
      this.id = this.firstGoods.id;
      await lf.setItem("firstOrderID", this.id);
    },
    fetch() {
      this.$router.push(`/center/order/${this.id}`);
    },
    async goPay() {
      // await lf.setItem("currentGoods", this.firstGoods);
      if ((await lf.setItem("firstOrderID")) == this.id) {
        return;
      }
      await lf.setItem("firstOrderID", this.id);
      this.$router.push(`/center/order/${this.id}`);
    },

    logout() {
      this.$store.commit("Logout");
      if (this.$store.state.token) return this.$message("退出失败");
      this.$router.push("/login");
      this.$message.success("退出成功");
    },
    sideSelect() {
      this.toggle();
    },
    toggle() {
      if (window.innerWidth > 1250) return;
      this.showSidebar = !this.showSidebar;
      this.showMask = !this.showMask;
    },
    closeSidebar() {
      if (window.innerWidth > 1250) return;
      this.showSidebar = false;
      this.showMask = false;
    },
  },
};
</script>

<style lang="scss">
.center-wrapper {
  .el-header {
    .logo {
      i {
        display: none;
      }
    }
  }
  .el-main {
    padding: 30px 20px;
    .grid {
      .inner {
        padding: 15px;
      }
    }
  }
  .mask {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0.4;
    z-index: 80;
  }
}
.logo {
  h1 {
    color: #fff;
  }
}
@media screen and (max-width: 1250px) {
  .center-wrapper {
    .el-header {
      min-width: 100%;
      .logo {
        // width: auto;
        // flex: 1;
        i {
          display: block;
          font-size: 24px;
        }
      }
      .nav-box {
        margin-left: 0;
        .el-menu-item {
          margin-right: 0;
        }
      }
      .rigth-menu {
        flex: 1;
        width: auto;
      }
    }
    .el-aside {
      left: -200px;
    }
    .showSidebar {
      .el-aside {
        left: 0;
      }
    }
    .el-main {
      margin-left: 0px;
      padding: 20px;
      .grid {
        flex: none !important;
        margin-left: 0 !important;
        width: 100% !important;
      }
      .record-wrapper {
        .grid {
          width: 100% !important;
        }
      }
    }
  }
}
@media screen and (max-width: 750px) {
  .center-wrapper {
    .el-header {
      .logo {
        width: 165px;
        flex: none;
      }
      .rigth-menu {
        flex: none;
        width: 130px !important;
      }
    }
    .showSidebar {
      .el-aside {
        left: 0;
      }
    }
    .el-main {
      .profile {
        width: auto;
      }
      .grid {
        flex: none !important;
        margin-left: 0 !important;
        width: 100% !important;
        span {
          margin: 0;
        }
        .inner {
          padding: 15px 0;
          .el-form {
            .el-input {
              // width: 90%;
            }
          }
        }
      }
      .record-wrapper {
        .grid {
          width: 100% !important;
        }
      }
      .el-dialog__wrapper {
        .el-dialog {
          width: 95% !important;
        }
      }
    }
  }
  .el-message-box {
    width: 80% !important;
  }
}
</style>
